<template>
  <a-card :bordered="false">
    <search :config="searchConfig" @search="search" @getHeight="getHeight"/>
    <div class="page_table">
      <vxe-grid
        ref="xGrid"
        :border="true"
        :resizable="true"
        :showOverflow="true"
        size="mini"
        :loading="loading"
        :height="pageHeight-seachHeight-94"
        :align="left"
        :columns="columns"
        :data="dataSource"
        :toolbar-config="tableToolbar"
        :checkbox-config="checkboxConfig"
        v-bind="vexConfig"
        @checkbox-change="selectChangeEvent"
        @checkbox-all="selectChangeEvent"
        @custom="custom"
      >
        <!-- 按钮区域 -->
        <template #toolbar_buttons>
          <div class="table-operator">
            <a-button @click="handleAdd" type="primary">新增</a-button>
            <a-button type="primary" @click="batchDel">删除</a-button>
            <!--            <a-button type="primary" @click="startorstop('009')">启用</a-button>-->
            <!--            <a-button type="primary" @click="startorstop('003')">禁用</a-button>-->
            <!--            <a-button type="primary" @click="handleExportXls(config.tableName)">模板下载</a-button>-->
            <!--            <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader"-->
            <!--                      :action="importExcelUrl" @change="handleImportExcel">-->
            <!--              <a-button type="primary">导入</a-button>-->
            <!--            </a-upload>-->
            <!--            <a-button type="primary" @click="downExportXls('competing_service')">导出</a-button>-->
            <slot name="button"></slot>
          </div>
        </template>
        <!--        详情-->
        <template #competingCode="{ row,rowIndex }">
          <a @click="handleAdd(row,'详情',false,false)">{{ row.competingCode }}</a>
        </template>
        <template #action="{ row,rowIndex }">
          <a v-has="'getGoodsAdress:update'" @click='handleAdd(row,"编辑")'>编辑</a>
          <a-divider type="vertical"/>
          <a href="javascript:" @click="handleBusiness(config.tableName,row)">日志</a>
        </template>
        <template #update="{ row }">
          <a-switch :checked="row.status" size="small" @change="handleStatus(row,$event)"/>
        </template>
        <template #pager>
          <vxe-pager
            :layouts="['Total', 'PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump','Sizes', 'FullJump']"
            :currentPage.sync="ipagination.current"
            :page-size.sync="ipagination.pageSize"
            :total="ipagination.total"
            :pageSizes="ipagination.pageSizeOptions"
            @page-change="handlePageChange">
          </vxe-pager>
        </template>
      </vxe-grid>
    </div>
    <!-- 弹出层 -->
    <form-add-edit ref="formAdd"></form-add-edit>
    <business-log ref="businessLog"></business-log>
  </a-card>
</template>

<script>
import '@/assets/less/TableExpand.less'
import { PageListMixin } from '@/mixins/PageListMixin'
import { getAction, postAction } from '@/api/manage'
import ARow from 'ant-design-vue/es/grid/Row'
import ARangePicker from 'ant-design-vue/es/date-picker/RangePicker'
// import CompenTitiveModal from './modules/CompenTitiveModal'
import FormAddEdit from '@comp/view/base-crud/form/FormAddEdit'

export default {
  name: 'SignConfigList',
  mixins: [PageListMixin],
  components: {
    ARangePicker,
    // CompenTitiveModal,
    FormAddEdit,
    ARow
  },
  props: {
    config: {
      type: Object,
      default: () => {
      },
    },
    formConfig: {
      type: Array,
      default: () => []
    },
    columns: {
      type: Array,
      default: () => []
    },
    url: {
      type: Object,
      default: () => {
      }
    },
    searchOn: {
      type: Boolean,
      default: {}
    },
    queryParam: {
      type: Object,
      default: {}
    }
  },
  data() {
    return {
      description: '竞品商品管理页面',
      // 表头
      searchConfig: [
        {
          type: 'input',
          name: 'competingName',
          placeholder: '竞品名称'
        },
        {
          type: 'input',
          name: 'brand',
          placeholder: '竞品品牌'
        },
        {
          type: 'input',
          name: 'classifyName',
          placeholder: '所属系列'
        }
      ],
      // url: {
      //   list: window._CONFIG['domianSfaURL'] + "/competing/findPageList",
      //   detail:window._CONFIG['domianSfaURL'] + "/competing/getInfo",
      //   delete: window._CONFIG['domianSfaURL'] + "/competing/deleteById",
      //   deleteBatch: window._CONFIG['domianSfaURL'] + "/competing/deleteBatch",
      //   startOrStopUrl: window._CONFIG['domianSfaURL'] + "/competing/startOrStop",
      //   importExcelUrl: window._CONFIG['domianSfaURL'] + '/competing/importExcel',
      //   exportXlsUrl: window._CONFIG['domianSfaURL'] + '/competing/exportXls'
      // }
    }
  },
  computed: {
    importExcelUrl: function () {
      return `${this.url.importExcelUrl}`
    }
  },
  //
  methods: {
    custom(e) {
      console.log(e)
      if (['close', 'confirm'].includes(e.type)) {
        let data = e.$grid.getColumns()
        console.log(data)
        if (data && data.length) {
          let vos = data.filter(item => item.title && item.field).map(item => Object.assign({}, {
            fieldCode: item.field,
            fieldValue: item.title
          }))
          console.log(vos)
          let { functionCode, tableCode } = this.config
          postAction('/pageconfig/cnPageconfigCurrent/saveOrUpdate', { functionCode, tableCode, vos })

        }
      }
    },
    async handleAdd(record = {}, title = '新增', disabled = false, disableSubmit = false) {
      if (record.id && this.url.detail) {
        const res = await getAction(this.url.detail, { id: record.id })
        if (res.success) {
          if (res.result) {
            record = res.result
          }
        }
      }
      let config = {
        title: title,
        width: 500,
        addOrUpdateUrl: this.url.add,  //审核地址
        method: 'post',
        labelCol: {
          xs: { span: 24 },
          sm: { span: 6 }
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 }
        },
        list: this.formConfig.map(item => Object.assign({}, item, { disabled }))
      }
      this.$refs.formAdd.edit(record, config)
      this.$refs.formAdd.disableSubmit = disableSubmit
    },

  }

}
</script>

<style scoped>
@import '~@assets/less/common.less';
</style>